<template>
    <div class="company-edit-form-sec">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="edit-form">
            <el-row>
                <el-col :span="span">
                    <el-form-item label="公司名称" prop="companyName">
                        <el-input v-model="ruleForm.companyName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="span" :offset="offset">
                    <el-form-item label="关联业务区" prop="serviceArea">
                        <el-select v-model="ruleForm.serviceArea " placeholder="请选择">
                            <el-option label="华南地区" value="华南地区"></el-option>
                            <el-option label="华北地区" value="华北地区"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="span">
                    <el-form-item label="法人姓名" prop="legalPerson">
                        <el-input v-model="ruleForm.legalPerson" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="span" :offset="offset">
                    <el-form-item label="上级公司" prop="superiorCompany">
                        <el-select v-model="ruleForm.superiorCompany" placeholder="请选择">
                            <el-option label="广东分公司" value="广东分公司"></el-option>
                            <el-option label="北京分公司" value="北京分公司"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="span">
                    <el-form-item label="法人身份证号码" prop="idCard">
                        <el-input v-model="ruleForm.idCard" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="span" :offset="offset">
                    <el-form-item label="注册地址" prop="registeredAddress">
                        <el-input v-model="ruleForm.registeredAddress" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="span">
                    <el-form-item label="身份证有效期" prop="idCardDate">
                        <el-date-picker
                            v-model="ruleForm.idCardDate"
                            type="daterange"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="span">
                    <el-form-item label="成立日期" prop="foundationDate">
                        <el-date-picker
                            v-model="ruleForm.foundationDate"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="span" :offset="offset">
                    <el-form-item label="实际租赁地址" prop="leaseAddress">
                        <el-input v-model="ruleForm.leaseAddress" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="span">
                    <el-form-item label="注册资金(万元)" prop="money">
                        <el-input v-model="ruleForm.money" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="span">
                    <el-form-item label="登记注册类型" prop="registeredType">
                        <el-select v-model="ruleForm.registeredType" placeholder="请选择">
                            <el-option label="有限责任公司" value="有限责任公司"></el-option>
                            <el-option label="国有企业" value="国有企业"></el-option>
                            <el-option label="民营企业" value="民营企业"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="span" :offset="offset">
                    <el-form-item label="营业期限" prop="businessTerm">
                        <el-select v-model="ruleForm.businessTerm" placeholder="请选择">
                            <el-option label="5年" value="5年"></el-option>
                            <el-option label="10年" value="10年"></el-option>
                            <el-option label="不限" value="不限"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="span">
                    <el-form-item label="统一社会信用代码" prop="creditCode">
                        <el-input v-model="ruleForm.creditCode" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="牌照办理进度" prop="licenceProgress">
                        <el-select v-model="ruleForm.licenceProgress" placeholder="请选择">
                            <el-option label="未办理" value="未办理"></el-option>
                            <el-option label="办理中" value="办理中"></el-option>
                            <el-option label="已办理" value="已办理"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="span" :offset="offset">
                    <el-form-item label="上传营业执照" prop="businessImg">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.businessImg" :src="ruleForm.businessImg" class="avatar">
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-form-item label="经营范围" prop="businessScope">
                        <el-input v-model="ruleForm.businessScope" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="ruleForm.remark" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "companyEditForm",
        data() {
            return {
                span: 8,
                offset: 4,
                ruleForm: {
                    companyName: '',
                    serviceArea: '',
                    legalPerson: '',
                    superiorCompany: '',
                    idCard: '',
                    registeredAddress: '',
                    idCardDate: '',
                    foundationDate: '',
                    leaseAddress: '',
                    money: '',
                    registeredType: '',
                    businessTerm: '',
                    creditCode: '',
                    businessImg: '',
                    licenceProgress: '',
                    businessScope: '',
                    remark: ''
                },
                rules: {
                    companyName: [
                        { required: true, message: '请输入法人公司名称', trigger: 'blur' }
                    ],
                    serviceArea: [
                        { required: true, message: '请选择关联业务区', trigger: 'change' }
                    ],
                    legalPerson: [
                        { required: true, message: '请输入法人姓名', trigger: 'blur' }
                    ],
                    superiorCompany: [
                        { required: true, message: '请选择上级公司', trigger: 'change' }
                    ],
                    idCard: [
                        { required: true, message: '请输入法人身份证号码', trigger: 'blur' }
                    ],
                    registeredAddress: [
                        { required: true, message: '请输入注册地址', trigger: 'blur' }
                    ],
                    idCardDate: [
                        { required: true, message: '请选择身份证有效期', trigger: 'change' }
                    ],
                    foundationDate: [
                        { required: true, message: '请选择成立日期', trigger: 'change' }
                    ],
                    leaseAddress: [
                        { required: true, message: '请输入实际租赁地址', trigger: 'blur' }
                    ],
                    money: [
                        { required: true, message: '请输入注册资金(万元)', trigger: 'blur' }
                    ],
                    registeredType: [
                        { required: true, message: '请选择登记注册类型', trigger: 'change' }
                    ],
                    businessTerm: [
                        { required: true, message: '请选择营业期限', trigger: 'change' }
                    ],
                    creditCode: [
                        { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
                    ],
                    licenceProgress: [
                        { required: true, message: '请选择牌照办理进度', trigger: 'change' }
                    ],
                    businessScope: [
                        { required: true, message: '请输入经营范围', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            // 提交表单
            submitForm(formName) {
                console.log('submit...', formName);
                this.$refs[formName].validate((valid) => {
                    console.log('validate...');
                    if (valid) {
                        // 如果存在索引则更新数据，否则创建
                        if (this.$store.state.companyIndex >= 0) {
                            this.$store.state.companyTableData[this.$store.state.companyIndex] = this.ruleForm;
                        } else {
                            // 获取法人公司编码
                            let lastCompanyNo = this.$store.state.companyTableData[this.$store.state.companyTableData.length - 1].companyNo;
                            this.ruleForm.companyNo = 'C' + (parseInt(lastCompanyNo.substr(1)) + 1);
                            // 公司人数
                            this.ruleForm.employees = 100;
                            // 启用/停用
                            this.ruleForm.status = true;
                            this.$store.state.companyTableData.push(this.ruleForm);
                        }
                        this.$message({
                            message: '保存成功！',
                            type: 'success'
                        });
                        this.$router.push({name: 'company'});
                    } else {
                        console.log('error submit!!');
                        this.$message({
                            message: '请正确填写信息后再提交！',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 上传营业执照
            handleAvatarSuccess(res, file) {
                this.ruleForm.businessImg = URL.createObjectURL(file.raw);
                console.log(this.ruleForm.businessImg);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    return false;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return false;
                }
                return isJPG && isLt2M;
            }
        },
        mounted() {
            if (this.$store.state.companyIndex >= 0) {
                Object.assign(this.ruleForm, this.$store.state.companyTableData[this.$store.state.companyIndex]);
            }
        }
    }
</script>

<style lang="less" scoped>
    /* 表单编辑区域 */
    .company-edit-form-sec {
        /* 表单内容 */
        .edit-form {
            /* 表单项 */
            .el-form-item {
                text-align: left;
                /* 输入框 */
                .el-input, .el-input__inner, .el-select {
                    width: 100%;
                }
                /* 上传营业执照 */
                /deep/.avatar-uploader {
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    .el-upload {
                        width: 100%;
                        height: 100%;
                        border: 1px solid #d9d9d9;
                        border-radius: 6px;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        background: url("/static/images/company/upload.png") no-repeat 0 0;
                        background-size: contain;
                        .avatar-uploader-icon {
                            font-size: 28px;
                            color: #8c939d;
                            width: 100%;
                            height: 100%;
                            line-height: 100px;
                        }
                        .avatar {
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                }
            }
        }
    }
</style>
